<template>
  <div class="home">
    <div id="container"></div>
    <div id="map_move">
      <div class="mapzoom" title="拖动移动">
        <svg-icon name="moveMap"></svg-icon>
      </div>
      <div class="mapzoom" title="画多边形" @click="createPolygon">
        <svg-icon name="polygon"></svg-icon>
      </div>
      <div class="mapzoom" title="画折线">
        <svg-icon name="brokenLine"></svg-icon>
      </div>
    </div>
    <div id="mapzoom">
      <div class="mapzoom" title="缩小" @click="mapMinZoom">
        <el-icon><ZoomOut /></el-icon>
      </div>
      <div class="mapzoom" title="放大" @click="mapMaxZoom">
        <el-icon><ZoomIn /></el-icon>
      </div>
      <div class="mapzoom" title="初始位置" @click="mapInitZoom">
        <el-icon><Location /></el-icon>
      </div>
      <div class="mapzoom" title="暗黑模式" @click="mapSetStyle">
        <el-icon>
          <Sunny v-if="data.dark" />
          <Moon v-else />
        </el-icon>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue'
import { mapInit, addDrawingManager } from '@/utils/mapSetting'
const mapConfig = ref({
  location: [113.371067, 23.083159],
  zoom: 11,
  viewMode: '3D'
})
const data = reactive({
  map: '',
  dark: '',
  polyEditor: ''
})
onMounted(() => {
  init()
  addDrawTool()
})

const init = () => {
  data.map = mapInit(mapConfig.value, 'container')
}
// 缩小
const mapMinZoom = () => {
  data.map.setZoom(data.map.getZoom() - 1)
}
// 放大
const mapMaxZoom = () => {
  data.map.setZoom(data.map.getZoom() + 1)
}
// 回到最初的中心点
const mapInitZoom = () => {
  data.map.setZoomAndCenter(mapConfig.value.zoom, mapConfig.value.location)
}
// 场景切换
const mapSetStyle = () => {
  data.dark = !data.dark
  let styleName = 'amap://styles/'
  if (data.dark) {
    styleName = styleName + 'dark'
    data.map.setMapStyle(styleName)
  } else {
    styleName = styleName + 'normal'
    data.map.setMapStyle(styleName)
  }
}
const addDrawTool = () => {
  const styleOption = {
    strokeColor: "#FF33FF",
    strokeOpacity: 0.2,
    fillColor: "#1791fc",
    fillOpacity: 0.4,
    strokeWeight: 3
  }
  data.polyEditor = addDrawingManager()
}
// 开始画图
const createPolygon = () => {
  data.polyEditor.close()
  data.polyEditor.setTarget()
  data.polyEditor.open()
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100vh;
}
#container {
  width: 100%;
  height: 100vh;
}
#mapzoom {
  position: absolute;
  top: 120px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.mapzoom {
  width: 25px;
  height: 25px;
  color: #409eff;
  background-color: #fff;
  line-height: 25px;
  text-align: center;
  border-radius: 2px;
  margin-top: 5px;
  border: 1px solid #dfdfdf;
  cursor: pointer;
}
#map_move{
  position: absolute;
  top: 120px;
  right: 300px;
  display: flex;
  align-items: flex-end;
}
</style>
